<!--  -->
<template>
    <div class="home">
        <section ion class="container-main-header">
            <section class="header-left disFlex">
                <i class="el-icon-menu"></i>
                <span>首页</span>/
                <span>商品</span>/
                <span>商品分类</span>
                <i class="el-icon-pear"></i>
            </section>
        <section class="datalist-box">
            <section class="datalist" style="margin-top:20px;">
                <section class="datalist-box">
                    <i class="el-icon-document"></i>&nbsp;&nbsp;
                    <span>数据列表</span>
                    <el-button class="addactivity" @click="handleAdd()" style="float: right;padding:6px 14px" >添加</el-button>
                </section>
            </section>
            <section class="goodList">
                    <el-table
                    :data="tableData.slice((currentPage - 1) * pageSize, 
			        currentPage*pageSize)" border style="width: 100%" >
                    <el-table-column prop="id" label="编号" width="100" align="center"></el-table-column>
                    <el-table-column prop="type" label="类型名称" align="center"> </el-table-column>
                    <el-table-column prop="propertycount" label="属性数量"  width="100" align="center"> </el-table-column>
                    <el-table-column prop="parameter" label="参数数量"  width="100" align="center"> </el-table-column>
                    <el-table-column prop="set" label="设置"  width="200" align="center"> 
                        <el-row class=" " >
                            <el-button size="mini">属性列表</el-button>
                            <el-button size="mini">参数列表</el-button>
                        </el-row>
                    </el-table-column>
                    <el-table-column label="操作"  width="200" align="center"> 
                        <template slot-scope="scope">
                                <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                                <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                            </template>
                    </el-table-column>
                </el-table>
            </section>
            <section class="block">
                <span class="demonstration"></span>
                <el-pagination
                    @size-change="handleSizeChange"
                    background
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5,10]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="tableData.length"
                ></el-pagination>
            </section>
            </section>
    </section>
    </div>
    
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
export default {
  //import引入的组件需要注入到对象中才能使用

    data() {
    return {
        tableData: [{
            id: '1',
            type: '服装-T恤',
            propertycount: '2',
            parameter: '5',
        }, {
            id: '2',
            type: '服装-裤装',
            propertycount: '2',
            parameter: '4',
        }, {
            id: '3',
            type: '手机数码-手机通讯',
            propertycount: '2',
            parameter: '4',
        }, {
            id: '4',
            type: '配件',
            propertycount: '0',
            parameter: '0',
        }, {
            id: '5',
            type: '居家',
            propertycount: '0',
            parameter: '0',
        }, {
            id: '6',
            type: '居家',
            propertycount: '0',
            parameter: '0',
        }],
        value1: true,
        currentPage: 1,
            pageSize: 5,
            total: 0, // 总条目数
            multipleSelection: [],
            border: true,
            select: "",
            input: "",
            value1: "",
            border: true,
    }; 
    },
        methods: {
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageSize=val;
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.currentPage=val;
            },
            handleAdd(index, item){
                this.$prompt('*类型名称', '添加类型', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                }).then(({ value }) => {
                    let obj = {
                        id: '7',
                        type: value,
                        propertycount: '2',
                        parameter: '5',
                    }
                    this.tableData.push(obj)
                    this.$message({
                        type: 'success',
                        message: '你添加的内容是: ' + value
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消输入'
                    });       
                });
            },
            handleEdit(index, item){
                this.$prompt('*类型名称', '编辑类型', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                }).then(({ value }) => {
                    item.type = value  
                    this.$message({
                        type: 'success',
                        message: '你添加的内容是: ' + value
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消输入'
                    });       
                });
            },
            handleDelete(index, item){
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.tableData.splice(index, 1)
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });          
                });
            } 
        }
    };
</script>
<style  scoped>   
    .home {
        display: flex;
    }
    .main {
        flex: 1;
    }
    .container-main-header .el-icon-pear{
        float: right;
        line-height: 50px;
        margin-right: 20px;
    }
    .container-main-header {
        text-align: left;
        /* padding: 0 20px; */
        width: 100%;
        display: flex;
        flex-direction: column;
    }
    .header-left {
        height: 50px;
        line-height: 50px;
        border-bottom: 1px solid #ccc;
    }
    .header-left span{
        margin: 5px;
        font-size: 14px;
    }
    .el-icon-menu {
        margin-right: 20px;
    }
    .el-icon-pear {
        font-size: 24px;
    }
    .datalist-box{
        margin: 0 20px;
    }
    .datalist {
    border: 1px solid #ebeef5;
    background-color: #fff;
    color: #303133;
    border-radius: 4px;
    }
    .app-main .miaosha-box .search-Box .search-box,
    .datalist-box {
    padding: 20px;
    }
    .app-main .miaosha-box .miaosha-input {
    /* width: 380px; */
    height: 32px;
    display: flex;
    align-items: center;
    font-size: 12px;
    margin-top: 30px;
    }
    .app-main .miaosha-box .miaosha-input span {
    /* width: 130px; */
    margin-left: 60px;
    font-size: 16px;
    }
    .goodList{
        margin-top: 20px;
    }
    .block{
        float: right;
        margin-top: 10px;
    }
</style>